<template>
  <div class="time-line">
    <div class="time-line-item" v-for="(item, index) in sortDakaRecord" :key="index">
      <div class="left">
        <div class="time">{{ item.time }}</div>
        <div class="line"></div>
      </div>
      <div class="right">
        <div class="card-container" v-for="(dakaItem, i) in item.list" :key="i">
          <small-card
          @del="delDaka" 
          :dakaData="dakaItem" 
          :cardData="dakaItem.cardData"></small-card>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import smallCard from "../../../index/components/card";
export default {
  components: {
    smallCard
  },
  props: {
    dakaData: {
      type: Array,
      default: () => []
    },
    cardDataList: {
      type: Array,
      default:() => []
    }
  },
  methods: {
    delDaka(id) {
      this.$emit('del', id);
    }
  },
  computed: {
    sortDakaRecord() {
      if (!this.dakaData || !this.dakaData.length) return [];
      const DELETED_CARD = {}; // TODO
      const ret = [];
      const formatTime = (dateString) => {
        const date = new Date(dateString);
        const min = date.getMinutes() + '';
        const hour = date.getHours() + '';
        return `${hour.length === 1 ? '0'+ hour : hour}:${min.length === 1 ? '0'+ min : min}`;
      }
      const findCardData = (cardId) => {
        let point;
        this.cardDataList.some(item => {
          if (item._id === cardId) {
            point = item;
            return true;
          }
        })
        if (!point) {
          point = DELETED_CARD;
        }
        return point;
      }
      const createTimeItem = item => {
        return {
          time: formatTime(item.created_time),
          timeStamp: new Date(item.created_time).getTime(),
          list: [Object.assign({}, item, {cardData: findCardData(item.cardId)})]
        };
      };
      // 初始化
      ret.push(createTimeItem(this.dakaData[0]));
      let point = 0;
      for (let i = 1; i < this.dakaData.length; i++) {
        const dakaData = Object.assign({}, this.dakaData[i], {cardData: findCardData(this.dakaData[i].cardId)});
        if (
          Math.abs(
            new Date(dakaData.created_time).getTime() -
              ret[point].timeStamp
          ) <
          5 * 60 * 1000 // 5min
        ) {
          ret[point].list.push(dakaData)
        } else {
          ret.push(createTimeItem(dakaData));
          point++;
        }
      }
      return ret;
    }
  }
};
</script>

<style lang="less">
.time-line {
  margin-top: 14px;
}
.time-line-item {
  display: flex;
  margin-bottom: 20px;
  .left {
    flex: none;
    width: 47.5px;
    position: relative;
    .line {
      display: block;
      position: absolute;
      right: 0;
      width: 2px;
      top: 0;
      bottom: 0;
      // background: #E5E5E5;
      background: #e5e5e5;
    }
    .time {
      font-size: 13px;
      font-weight: 600;
    }
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    padding-left: 4px;
    margin-left: -5px;
    .card-container {
      zoom: 0.7;
      margin-left: 7px;
      margin-bottom: 10px;
    }
  }
}
.time-line-item + .time-line-item .left .line {
  top: -20px;
}
</style>